<!--充值审核 -->
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px" class="tabel-form">
      <div>
        <el-form-item label="店铺名称" prop="shopName">
          <el-input v-model="queryParams.shopName" placeholder="请输入店铺名称" clearable
                    min-width="250" />
        </el-form-item>
        <el-form-item label="用户直推" style="margin-right: 40px;">
          <el-input v-model="queryParams.userDirectPush" placeholder="输入用户名" clearable
                    style="width: 180px;margin-right:20px;" @keyup.enter.native="handleQuery" @input="change1" />
        </el-form-item>
        <el-form-item label="用户伞下" style="margin-right: 30px;">
          <el-input v-model="queryParams.userUnderUmbrella" placeholder="输入用户名" clearable
                    style="width: 180px;margin-right:20px;" @keyup.enter.native="handleQuery" @input="change2" />
        </el-form-item>
        <el-form-item label="用户三代" style="margin-right: 30px;">
          <el-input v-model="queryParams.user3rdGeneration" placeholder="输入用户名" clearable
                    style="width: 180px;margin-right:20px;" @keyup.enter.native="handleQuery" @input="change3" />
        </el-form-item>
        <el-form-item label="接收地址" prop="trcAddress">
          <el-input v-model="queryParams.trcAddress" placeholder="请输入接收地址" clearable
                    min-width="250" />
        </el-form-item>
        <el-form-item label="会员层级" prop="storey" style="margin-right: 30px">
          <el-select v-model="queryParams.storey" placeholder="请输入会员层级" style="width: 180px;">
            <el-option v-for="item in storeyList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否首充" style="margin-right: 40px;">
          <el-select v-model="queryParams.firstRecharge" clearable style="width: 150px;">
            <el-option v-for="item in isTopupList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryParams.shopStatus" clearable
                     min-width="150">
            <el-option v-for="item in statusList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="金额范围" style="margin-right: 20px;">
          <el-input v-model="queryParams.balanceStart" placeholder="金额范围下限" clearable style="width: 130px;" />
          <span> 到 </span>
          <el-input v-model="queryParams.balanceEnd" placeholder="金额范围上限" clearable style="width: 130px;" />
        </el-form-item>
        <el-form-item prop="userName" label="时间" style="margin-left: 30px">
          <timeConvert @time-range-selected="timeRange" ref="payTime"></timeConvert>
        </el-form-item>
<!--        <el-form-item prop="userName" label="创建时间"  style="margin-left: 30px">
          <el-date-picker value-format="yyyy-MM-dd" v-model="value1" type="daterange"  range-separator="至" start-placeholder="开始日期"
                          end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>-->
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </div>
    </el-form>
    <el-table v-loading="loading" :data="RechargeList">
      <el-table-column label="创建时间" align="left" prop="createDate" width="160" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{$yun.convertTimestamp(scope.row.createDate)}}
        </template>
      </el-table-column>
      <el-table-column label="店铺名称" align="left" prop="shopName" width="120" :show-overflow-tooltip="true"/>
      <el-table-column label="代理线昵称" align="left" prop="agentAccount" width="120" :show-overflow-tooltip="true"/>
      <el-table-column label="会员层级" align="center" prop="storey" width="80" :show-overflow-tooltip="true"/>
      <el-table-column label="充值金额" align="center" prop="amount" width="120" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{$yun.priceFormatter(scope.row.amount)}}
        </template>
      </el-table-column>
      <el-table-column label="是否首充" align="center" prop="firstRecharge" width="120" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{scope.row.firstRecharge == 0 ? '否' : '是'}}
        </template>
      </el-table-column>
      <el-table-column label="充值次数" align="left" prop="rechargeNumber" width="120" :show-overflow-tooltip="true"/>
      <el-table-column label="状态" align="center" prop="auditType" width="140">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 0">未审批</el-tag>
          <el-tag v-if="scope.row.status == 1" type="success">充值成功</el-tag>
          <el-tag v-if="scope.row.status == -1" type="info">充值失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="同行为IP数" align="center" prop="ipCount" width="220" />
      <el-table-column label="IP国家" align="center" prop="ip" width="220" />
      <el-table-column label="支付时间" align="center" prop="auditDate" width="220">
        <template slot-scope="scope">
          {{ $yun.convertTimestamp(scope.row.auditDate) }}
        </template>
      </el-table-column>
      <el-table-column label="接收地址" align="center" prop="accountNumber" width="220" />
      <el-table-column label="订单号" align="left" prop="orderNo" width="200" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          CZ{{scope.row.orderNo}}
        </template>
      </el-table-column>
      <el-table-column label="实际到账金额" align="center" prop="actualArrivalAmount" width="140" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{ '$' + $yun.formatAmount(scope.row.actualArrivalAmount) }}
        </template>
      </el-table-column>
      <el-table-column label="实际回调金额" align="center" prop="callbackAmount" width="140" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{ '$' + $yun.formatAmount(scope.row.callbackAmount) }}
        </template>
      </el-table-column>
      <el-table-column label="支付方式" align="center" prop="paymentMethod" width="130" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.payment_method" :value="scope.row.payMethod" />
        </template>
      </el-table-column>
      <el-table-column :label="$t('operate')" align="center" class-name="small-padding fixed-width" width="180"
                       fixed="right">
        <template slot-scope="scope">
          <div v-if="scope.row.status == 0">
            <el-button size="mini" type="success"  class="mini-btn" plain
                       @click="handleFun(scope.row.id,'pass','实际到账金额')" v-hasPermi="['user:Recharge:edit']">通过
            </el-button>
            <el-button size="mini"  class="mini-btn mini-btn-left" type="danger" plain
                       @click="handleFun(scope.row.id,'reject','拒绝通过填写备注')" v-hasPermi="['user:Recharge:remove']">拒绝
            </el-button>
          </div>
          <span v-else>已审核</span>
        </template>
      </el-table-column>
    </el-table>
<!--    <el-table v-loading="loading" :data="RechargeList">
      <el-table-column label="订单号" align="center" prop="orderNo" width="200" :show-overflow-tooltip="true" />
      <el-table-column label="店铺名" align="center" prop="shopName" width="120" :show-overflow-tooltip="true" />
      <el-table-column label="用户名" align="center" prop="userName" width="120" :show-overflow-tooltip="true" />
      &lt;!&ndash; <el-table-column label="类型 1：充值，2：提现" align="center" prop="type" /> &ndash;&gt;
      <el-table-column label="充值金额" align="center" prop="amount" width="120" :show-overflow-tooltip="true" :formatter="formatterAmount"/>
      <el-table-column label="下单时间" align="center" prop="createDate" width="180" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createDate, '{m}/{d}/{y}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="支付方式" align="center" prop="payMethod" width="120" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.payment_method" :value="String(scope.row.payMethod)" />
        </template>
      </el-table-column>
      <el-table-column label="通道ID" align="center" prop="" />
      <el-table-column label="实际金额" align="center" prop="actualArrivalAmount" width="120" :show-overflow-tooltip="true"  :formatter="formatterActualArrivalAmount"/>
      <el-table-column label="凭证图片" align="left" prop="voucherImg" width="120" :show-overflow-tooltip="true">
        <template slot-scope="scope">
           <span style="vertical-align: middle;margin-right: 8px">
          <oss-image-preview v-if="scope.row.voucherImg" :src="scope.row.voucherImg" :width="30" :height="30"/>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status" width="120">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.store_recharge_withdraw_status" :value="String(scope.row.status)" />
        </template>
      </el-table-column>
       <el-table-column label="完成时间" align="center" prop="auditDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.auditDate, '{m}/{d}/{y}') }}</span>
        </template>
      </el-table-column>
&lt;!&ndash;      <el-table-column label="账户账号" align="center" prop="accountNumber" width="120" :show-overflow-tooltip="true" />
       <el-table-column label="账户所属机构" align="center" prop="accountName" />
      <el-table-column label="账户实名" align="center" prop="accountUserName" width="120" :show-overflow-tooltip="true" />
      <el-table-column label="审核用户名" align="center" prop="auditUserName" width="120" :show-overflow-tooltip="true" />
       <el-table-column label="备注" align="center" prop="description" />
      <el-table-column label="审核备注" align="center" prop="auditDesc" />
      <el-table-column label="取消备注" align="center" prop="cancelDesc" />
      <el-table-column label="取消时间" align="center" prop="cancelDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.cancelDate, '{m}/{d}/{y}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="冻结id" align="center" prop="freezeId" /> &ndash;&gt;
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120">
        <template slot-scope="scope">
          <div v-if="scope.row.status == 0">
            <el-button size="mini" type="success"  class="mini-btn" plain
              @click="handleFun(scope.row.id, 'pass','实际到账金额')" v-hasPermi="['user:Recharge:edit']">通过
            </el-button>
            <el-button size="mini"  class="mini-btn mini-btn-left" type="danger" plain
              @click="handleFun(scope.row.id, 'reject','拒绝通过填写备注')" v-hasPermi="['user:Recharge:remove']">拒绝
            </el-button>
          </div>
          <span v-else>已关闭</span>
        </template>
      </el-table-column>
    </el-table>-->

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />


  </div>
</template>
<script>
import { getList, auditPass, auditNoPass, auditAjax, shopRechargStatistics } from '@/api/store/recharge'
import DictSelect from "@/components/DictSelect/index.vue";
import Template from '@/views/setting/template/index.vue'
import {convertTimestamp} from "@/utils/yun";
export default {
  name: "recharge",
  components: { Template, DictSelect },
  dicts: ['store_recharge_withdraw_status', 'payment_method'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 店铺充值提现表格数据
      RechargeList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userType: null,
        storey: null,
        startTime: null,
        endTime: null,
        balanceStart: null,
        balanceEnd: null,
        isRecharge: null,
        pushUser:null,
        teamUser:null,
        threeUser:null,
        conditionType:null,
        shopName:null,
        shopId:null,
      },
      value1:null,
      statusList: [{id: 0,name: '正常' },{id: -2,name: '冻结'}],
      //是否充值列表
      isTopupList: [{ id: 1, name: '是' }, { id: 0, name: '否' }],
      // 用户伞下
      sanxiaList: [{ id: 1, name: '真实用户' }, { id: 2, name: '状态正常' }, { id: 3, name: '充值用户' }],
      // 用户三代
      userSandai: [{ id: 1, name: '真实用户' }, { id: 2, name: '状态正常' }, { id: 3, name: '充值用户' }],
      //用户直推
      pushUserList: [{ id: 1, name: '真实用户' }, { id: 2, name: '状态正常' }, { id: 3, name: '充值用户' }],
      // 层级
      storeyList:[{id:1,name:'1层'},{id:2,name:'2层'},{id:3,name:'3层'},{id:4,name:'4层'},{id:5,name:'5层'}],
    };
  },
  created() {
    this.queryParams.shopId = this.$route.query.id || null;
    this.getList();
  },
  methods: {
    convertTimestamp,
    /** 查询店铺充值提现列表 */
    getList() {
      this.loading = true;
      let obj = JSON.parse(JSON.stringify(this.queryParams))
      delete obj.teamUser
      delete obj.threeUser
      delete obj.pushUser
      this.removeNullValues(obj)
      shopRechargStatistics({ ...obj }).then(response => {
        this.RechargeList = response.data.records;
        this.total = response.data.total;
        this.loading = false;
      }).catch(err =>{
        this.loading = false;
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      if (this.value1) {
        this.queryParams.startTime = new Date(this.value1[0]).getTime();
        this.queryParams.endTime = new Date(this.value1[1]).getTime();
        // this.queryParams.startTime =this.value1[0]
        // this.queryParams.endTime =this.value1[1]
      }

      this.queryParams.pageNum = 1;
      if(this.queryParams.pushUser !== null) this.queryParams.conditionType = 1
      if(this.queryParams.teamUser !== null) this.queryParams.conditionType = 2
      if(this.queryParams.threeUser !== null) this.queryParams.conditionType = 3
      if(this.queryParams.conditionType && !this.queryParams.shopName) return this.$modal.msgError('请输入账户名')
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.$refs['payTime'].clear();
      this.queryParams = {
        pageNum: 1,
          pageSize: 10,
          userType: null,
          storey: null,
          startTime: null,
          endTime: null,
          balanceStart: null,
          balanceEnd: null,
          isRecharge: null,
          pushUser:null,
          teamUser:null,
          threeUser:null,
          conditionType:null,
          shopName:null,
      }
      this.value1 = null
      this.handleQuery();
    },
    /** 通过 */
    handleFun(id,type,tips) {
      const h = this.$createElement;
      this.$prompt( h('p', null, [h('i', { style: 'color: red' }, '* '),
          h('span', null,  type == 'pass' ? '实际到账金额' : '备注')]),
        tips,{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern:/^.+$/,
          inputErrorMessage:'请输入内容'
      }).then(async ({ value }) => {
        let data = null;
        console.log(data)
        let url = null;
        if(type == 'pass'){
          data = {id:id,actualArrivalAmount:value};
          url = "/web/shop/rw/auditPass";
        }else {
          data = {id:id,auditDesc:value};
          url = "/web/shop/rw/auditNoPass";
        }
        await auditAjax(url,data)
        this.$modal.msgSuccess(this.$t('audit-success'));
        this.getList()
      }).catch(() => {

      });
    },
    change1(e) {
      this.$set(this.queryParams,'userUnderUmbrella','')
      this.$set(this.queryParams,'user3rdGeneration','')
    },
    change2(e) {
      this.$set(this.queryParams,'userDirectPush','')
      this.$set(this.queryParams,'user3rdGeneration','')
    },
    change3(e) {
      this.$set(this.queryParams,'userDirectPush','')
      this.$set(this.queryParams,'userUnderUmbrella','')
    },
    removeNullValues(obj) {
      for (let key in obj) {
        if (obj[key] === null) {
          delete obj[key];
        }
      }
    },
    timeRange(obj){
      this.queryParams.startTime = obj.startTime
      this.queryParams.endTime = obj.endTime
    },
  }
};
</script>
